微前端之 qiankun 实战

您所在的位置：网站首页 › react 静态 › 微前端之 qiankun 实战

微前端之 qiankun 实战

2023-05-05 05:32| 来源: 网络整理| 查看: 265

微前端概述

微前端就是将应用拆分成多个子应用，主应用再加载这些子应用。核心就是先拆后合。

微前端解决的问题技术栈不同独立开发，独立部署微前端方案 iframe：通过iframe嵌入子应用，通过postMessage进行通信，完美的沙箱机制。缺点：弹窗只能在iframe中，url不能体现在地址栏。 single-spa：通过SystemJS加载子应用，没有沙箱机制 qiankun：对single-spa封装，提供了沙箱机制模块联邦：将组件打包导出，需要使用webpack5 其它：EMP（百度），MicroApp （京东），wujie（腾讯） qiankun 实战主应用创建主应用：yarn create react-app 添加路由：yarn add react-router-dom import { BrowserRouter, Link } from "react-router-dom"; function App() { return ( react static ); } export default App; 安装qiankun：yarn add qiankun 注册微应用并启动 import { registerMicroApps, start } from "qiankun"; registerMicroApps([ { name: "react", entry: "//localhost:8000", container: "#subapp", activeRule: "/react", }, { name: "static", entry: "//localhost:9000", container: "#subapp", activeRule: "/static", }, ]); start(); 静态微应用创建静态页面 Document const rootEle = document.getElementById("root"); rootEle.innerHTML = `this is static page`; 导出生命周期钩子 Document function render(props) { const { container } = props; const rootEle = container ? container.querySelector("#root") : document.getElementById("root"); rootEle.innerHTML = `this is static page`; } if (!window.__POWERED_BY_QIANKUN__) { render({}); } window.subStatic = { bootstrap: async () => { console.log("bootstrap"); }, mount: async (props) => { console.log("mount"); render(props); }, unmount: async () => { console.log("mount"); }, };

切到微应用路由后流程：

主应用加载入口文件内容加工html字符串，（去掉外链css, 外链js）调用bootstrap方法将加工后的html字符串嵌入挂载点执行微应用js代码调用mount方法

从微应用路由切到其它路由流程：

将挂载点的DOM移除调用unmount方法启动：支持跨域serve -C react 微应用修改端口号：添加.env文件，修改端口号PORT=8000 打包成umd格式：安装修改配置的第三方工具@rescripts/cli，修改配置 packaga.json "scripts": { "start": "rescripts start", "build": "rescripts build", "test": "rescripts test", "eject": "rescripts eject" }

.rescriptsrc.js

module.exports = { webpack: (config) => { config.output.library = "subReact"; config.output.libraryTarget = "umd"; return config; }, devServer: (config) => { config.headers = { "Access-Control-Allow-Origin": "*", }; return config; }, }; 修改入口文件，导出生命周期钩子 import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; function render(props) { const { container } = props; const root = ReactDOM.createRoot( container ? container.querySelector("#root") : document.getElementById("root") ); root.render( ); } if (!window.__POWERED_BY_QIANKUN__) { render({}); } export async function bootstrap(props) { console.log("bootstrap", props); } export async function mount(props) { console.log("mount", props); render(props); } export async function unmount(props) { console.log("unmount", props); } 修改__webpack_public_path__ 新建 public-path.js并在入口文件首行导入 if (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line no-undef __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } css沙箱 start({ sandbox: { experimentalStyleIsolation: true } });

微应用的样式添加了唯一的父选择器div[data-qiankun="react"]用这种方式隔离。

通信通过props通信 registerMicroApps([ { name: "react", entry: "//localhost:8000", container: "#subapp", activeRule: "/react", + props: { key: 1, key2: 2 }, }, { name: "static", entry: "//localhost:5000", container: "#subapp", activeRule: "/static", }, ]);

【本文地址】

微前端之 qiankun 实战

微前端之 qiankun 实战

今日新闻

推荐新闻